<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :title="pageTlt"
    class="modal-dialog-wrapper"
    unmount-on-close
    :mask-closable="false"
    width="45vw"
  >
    <div class="main">
      <div class="main-tlt">维修项目名称</div>
      <div class="main-list">
        <a-form :model="form" ref="formRef">
          <div class="main-list-item" v-for="(item, index) in form.datas" :key="index">
            <a-form-item
              :field="`datas.${index}.name`"
              hide-asterisk
              :rules="[{ required: true, validator: validateName, trigger: 'change' }]"
            >
              <a-input placeholder="请输入" style="width: 280px" allow-clear v-model="item.name" />
              <div class="main-icon" style="color: #ea0000" @click="del(index)" v-if="index != 0 && index == form.datas.length - 1">
                <SvgIcon name="main-delete" color="#ea0000" />
                删除
              </div>
              <div class="main-icon" style="color: #165dff" @click="add(item)" v-if="index + 1 == form.datas.length">
                <SvgIcon name="sort-add" color="#165DFF" />
                新增
              </div>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { getAllMaintenance, maintenanceSave } from '@/api/asset/repair'
  // import { systemEdit, systemDetail, systemCodeDetail } from '@/api/system/system'
  // import { Message } from '@arco-design/web-vue'

  const showModal = ref(false)
  const pageTlt = ref('添加维修项目')

  const validateName = (value, cb) => {
    console.log(value)
    if (!value || value == '') {
      cb('请填写项目名称')
      return false
    } else {
      // 验证重复
      mainList.value.forEach((i) => {
        if (i.name == value) {
          cb('您填写的维修项目名称重复')
        }
      })
    }
  }

  // 默认form
  const form = ref({
    datas: [
      {
        name: '',
        type: 0,
        status: 1,
      },
    ],
  })

  // 删除
  const del = (index) => {
    form.value.datas.splice(index, 1)
  }

  // 新增
  const add = () => {
    form.value.datas.push({
      name: '',
      type: 0,
      status: 1,
    })
  }

  const resetFn = () => {
    form.value.datas = [
      {
        name: '',
        type: 0,
        status: 1,
      },
    ]
  }

  const detailList = ref([]) //已经被选中的，添加完更新后重新被渲染选中(回传到选择弹窗)
  const show = (list) => {
    form.value.datas[0].name = ''
    console.log('已选中的', list)
    detailList.value = list
    showModal.value = true
  }

  const onClose = () => {
    resetFn()
    showModal.value = false
  }

  // 获取所有维修项目
  const mainList = ref([])
  const getAllMain = () => {
    getAllMaintenance({ type: 0, status: 1 }).then((res) => {
      mainList.value = res.result
    })
  }

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          // Message.warning('您填写的维修项目名称重复')
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  const emit = defineEmits(['saveMainAdd'])
  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          // 验证通过后
          maintenanceSave({ data: form.value.datas }).then((res) => {
            console.log(res)
            // 成功后更新上个弹窗的数据
            emit('saveMainAdd', detailList.value)
            resetFn()
            showModal.value = false
            done()
          })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {
    getAllMain()
  })
</script>

<style lang="less" scoped>
  .main {
    color: #1d2129;
    height: 400px;
    .main-tlt {
      margin-bottom: 10px;
      font-size: 14px;
    }
    .main-list {
      display: flex;
      flex-direction: column;
      .main-list-item {
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .main-icon {
          margin-left: 22px;
        }
      }
    }
  }
  :deep(.arco-col-19) {
    flex: 0 0 100%;
    width: 100%;
  }
  :deep(.arco-col-5) {
    flex: 0 0 0;
    width: 0;
  }
  :deep(.main-list-item) {
    margin-bottom: 0 !important;
  }
</style>
